<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>field.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
  </script>

  <script src="static/js/doc.js">
  </script>

  <meta charset="utf8">
</head>

<body onload="prettyPrint()">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">field.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    Class to encapsulate an editable field.  Always uses an
 iframe to contain the editable area, never inherits the style of the
 surrounding page, and is always a fixed height.
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="../demos/editor/editor.html">Demo</a></li>
            <li><a href="../demos/editor/field_basic.html">Demo</a></li>
            <li><a href="closure_goog_editor_field.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">editor/field.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_editor_Field.html">
          goog.editor.Field</a><br/>
        <div class="class-details">This class encapsulates an editable field.

event: load Fires when the field is loaded
event: unload Fires when the field is unloaded (made not editable)

event: beforechange Fires before the content of the field might change

event: delayedchange Fires a short time after field has changed. If multiple
change events happen really close to each other only
the last one will trigger the delayedchange event.

event: beforefocus Fires before the field becomes active
event: focus Fires when the field becomes active. Fires after the blur event
event: blur Fires when the field becomes inactive

TODO: figure out if blur or beforefocus fires first in IE and make FF match</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>


  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.editor.Field.cancelLinkClick_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">cancelLinkClick_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Event handler for clicks in browsers that will follow a link when the user
clicks, even if it&#39;s editable. We stop the click manually
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_BrowserEvent.html">goog.events.BrowserEvent</a></span></div>
        <div class="entryOverview">The event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line1830">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.Field.getActiveFieldId"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">getActiveFieldId<span class="args">()</span>
        </span>
        &#8658; <div class="fullType"><span>?</span><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>


    <! -- Method details -->
    <div class="entryDetails">

   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span>?</span><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>&nbsp;
            The id of the active field.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line338">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.editor.Field.isGeneratingKey_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">isGeneratingKey_<span class="args">(<span class="arg">e</span>,&nbsp;<span class="arg">testAllKeys</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
      </div>


     <div class="entryOverview">
       Returns true if the keypress generates a change in contents.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_BrowserEvent.html">goog.events.BrowserEvent</a></span></div>
        <div class="entryOverview">The event.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">testAllKeys</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
        <div class="entryOverview">True to test for all types of generating keys. False to test for only the keys found in goog.editor.Field.KEYS_CAUSING_CHANGES_.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>&nbsp;
            Whether the keypress generates a change in contents.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line618">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.editor.Field.isSpecialGeneratingKey_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">isSpecialGeneratingKey_<span class="args">(<span class="arg">e</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
      </div>


     <div class="entryOverview">
       Returns true if the keypress generates a change in the contents.
due to a special key listed in goog.editor.Field.KEYS_CAUSING_CHANGES_
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_BrowserEvent.html">goog.events.BrowserEvent</a></span></div>
        <div class="entryOverview">The event.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>&nbsp;
            Whether the keypress generated a change in the contents.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line635">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.editor.Field.setActiveFieldId"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">setActiveFieldId<span class="args">(<span class="arg">fieldId</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Sets the active field id.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">fieldId</span>
        : <div class="fullType"><span>?</span><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
        <div class="entryOverview">The active field id.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line330">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.editor.Field.CHANGE_FREQUENCY"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">CHANGE_FREQUENCY</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       Number of milliseconds after a change when the change event should be fired.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line548">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.CTRL_KEYS_CAUSING_CHANGES_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">CTRL_KEYS_CAUSING_CHANGES_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></span></div>
     </div>


     <div class="entryOverview">
       Map of keyCodes (not charCodes) that when used in conjunction with the
Ctrl key cause changes in the field contents. These are the keys that are
not handled by basic formatting trogedit plugins.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line594">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.CTRL_KEYS_CAUSING_SELECTION_CHANGES_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">CTRL_KEYS_CAUSING_SELECTION_CHANGES_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></span></div>
     </div>


     <div class="entryOverview">
       Map of keyCodes (not charCodes) that when used in conjunction with the
Ctrl key cause selection changes in the field contents. These are the keys
that are not handled by the basic formatting trogedit plugins. Note that
combinations like Ctrl-left etc are already handled in
SELECTION_CHANGE_KEYCODES_
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line1012">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.DEBOUNCE_TIME_MS_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">DEBOUNCE_TIME_MS_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       The amount of time that a debounce blocks an event.
TODO: As of 9/30/07, this is only used for blocking
a keyup event after a keydown. We might need to tweak this for other
types of events. Maybe have a per-event debounce time?
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line289">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.editor.Field.DELAYED_CHANGE_FREQUENCY"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">DELAYED_CHANGE_FREQUENCY</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       Number of milliseconds between delayed change events.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line555">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.KEYS_CAUSING_CHANGES_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">KEYS_CAUSING_CHANGES_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></span></div>
     </div>


     <div class="entryOverview">
       Map of keyCodes (not charCodes) that cause changes in the field contents.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line576">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry protected">
       <td class="access"></td>





  <a name="goog.editor.Field.MUTATION_EVENTS_GECKO"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">MUTATION_EVENTS_GECKO</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></span>.&lt;<span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&gt;</div>
     </div>


     <div class="entryOverview">
       List of mutation events in Gecko browsers.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line905">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.POTENTIAL_SHORTCUT_KEYCODES_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">POTENTIAL_SHORTCUT_KEYCODES_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></span></div>
     </div>


     <div class="entryOverview">
       Map of keyCodes (not charCodes) that might need to be handled as a keyboard
shortcut (even when ctrl/meta key is not pressed) by some plugin. Currently
it is a small list. If it grows too big we can optimize it by using ranges
or extending it from SELECTION_CHANGE_KEYCODES_
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line1027">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.SELECTION_CHANGE_FREQUENCY_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">SELECTION_CHANGE_FREQUENCY_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       Frequency to check for selection changes.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line820">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.editor.Field.activeFieldId_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.editor.Field.</span><span class="entryName">activeFieldId_</span>
        : <div class="fullType"><span>?</span><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       There is at most one &quot;active&quot; field at a time.  By &quot;active&quot; field, we mean
a field that has focus and is being used.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_editor_field.js.source.html#line298">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory editor</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="closure/goog" current="editor/field.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
